<template>
  <!-- 就诊列表 -->
  <div id='visitslist'>
    <el-row>
      <el-col :span="24">
        患者姓名：
        <el-input size='small' v-model="hz.name" style="width: 200px"></el-input> &nbsp;&nbsp;
         手机号码：
        <el-input size='small'  v-model="hz.php" style="width: 200px"></el-input>&nbsp;&nbsp;

        <el-button
        size='small'
          @click="selectpatient()"
          type="primary"

        >搜索</el-button>
        <el-button type="" size='small'  @click="reslt()" >重置</el-button>

        <el-tabs class="mt" v-model="activeName" type="card">
          <el-tab-pane id='visit1' label="待就诊" name="first">
            <el-table
            v-if="activeName=='first'"
              :data="
                falseReg.slice(
                  (currentPage - 1) * pageSize,
                  currentPage * pageSize
                )
              "
              height="450"
              border
              style="width: 100%"
              :header-cell-style="{
                backgroundColor: '#eef5ff',
                textAlign: 'center',
              }"
              :cell-style="{ textAlign: 'center' }"
            >
              <el-table-column
                prop="dzmHisSchedulingWeek.date"
                label="就诊日期"
                width=""
              />
              <el-table-column
                prop="dzmPatient.name"
                label="患者姓名"
                width=""
              />
              <el-table-column
                prop="dzmPatient.mobile"
                label="患者电话"
                width=""
              />
              <el-table-column
                prop="dzmHisDepartment.departmentName"
                label="科室名称"
                width=""
              />
              <el-table-column
                prop="dzmHisRegisteredfee.registeredfeeName"
                label="挂号类型"
                width=""
              />
              <el-table-column
                prop="dzmHisRegisteredfee.registeredfeeAggregateAmount"
                label="挂号费用"
                width=""
              />
              <el-table-column label="挂号时间">
                <template slot-scope="sc">
                  {{ new Date(sc.row.createTime * 1000).toLocaleDateString() }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="操作">
                <template slot-scope="sc">
                  <el-button
                    @click="register(sc.row)"
                    type="success"
                    size="mini"
                    >立即就诊</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <div class="mt">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="falseReg.length"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane id='visit2' label="已就诊" name="second">
            <el-table
            v-if="activeName=='second'"
              height="450"
              :data="
                trueReg.slice(
                  (currentPage1 - 1) * pageSize1,
                  currentPage1 * pageSize1
                )
              "
              style="width: 100%"
              :header-cell-style="{
                backgroundColor: '#eef5ff',
                textAlign: 'center',
              }"
              :cell-style="{ textAlign: 'center' }"
            >
              <el-table-column
                prop="date"
                label="就诊日期"
                width=""
              />
              <el-table-column
                prop="name"
                label="患者姓名"
                width=""
              />
                <el-table-column
                prop="sex"
                label="患者性别"
                width=""
              />
                <el-table-column
                prop="age"
                label="患者年纪"
                width=""
              />
              <el-table-column
                prop="mobile"
                label="患者电话"
                width=""
              />
              <el-table-column
                prop="dname"
                label="科室名称"
                width=""
              />
              <el-table-column
                prop="leixing"
                label="挂号类型"
                width=""
              />
              <el-table-column label="操作" width="">
                <el-button type="primary" size="mini">查看详情</el-button>
              </el-table-column>
            </el-table>
            <div class="mt">
              <el-pagination
                @current-change="handleCurrentChange1"
                :current-page.sync="currentPage1"
                :page-size="pageSize1"
                layout="total, prev, pager, next"
                :total="trueReg.length"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <!-- 尾 -->
    <el-row>
      <el-col :span="24"></el-col>
    </el-row>
  </div>
</template>
<script>
import { loading,Sloading} from "../../api/doctor/tools/loading";
import {
  getAllRegister,
  getPatientbynameAndguahaodate,
  getAllyiRegister
} from "../../api/doctor/visitslist";

export default {
  name: "Visitslist",
  data() {
    return {
      //模糊查询
      hz: {
        name: "",
        php: "",
      },

      activeName: "first",
      //已就诊和未就诊
      falseReg: [],
      trueReg: [],
      //分页=当前页
      currentPage: 1,
      pageSize: 7,
      currentPage1: 1,
      pageSize1: 7,
    };
  },
  methods: {
    //立即就诊
    register(e) {
      this.$router.push({
        path: "seedoctor",
        query: { user: JSON.stringify(e) },
      });
    },

    //分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //分页
    handleCurrentChange1(val) {
      console.log(`当前页: ${val}`);
      this.currentPage1 = val;
    },
    //模糊查询
    selectpatient() {
      if (this.activeName == "first") {
        //未就诊查询
        getPatientbynameAndguahaodate({"name": this.hz.name,"php":this.hz.php,"i":1}).then((re) => {
          this.falseReg = re.data;
        });
      } else {
        //已就诊查询
        getAllyiRegister({ name:this.hz.name,php:this.hz.php}).then((re) => {
          this.trueReg = re.data;
        });
      }
    },
    //条件重置
    reslt() {
      this.hz.name = "";
      this.hz.datelist = [];
      getAllyiRegister({ name:'',php:''}).then((re) => {
        this.trueReg = re.data;
      });
      getAllRegister({ i: 1 }).then((re) => {
        this.falseReg = re.data;
      });
    },
  },
  mounted() {
    getAllyiRegister({ name:'',php:''}).then((re) => {
      this.trueReg = re.data;
    });
    getAllRegister({ i: 1 }).then((re) => {
      this.falseReg = re.data;
    });
  },
  watch: {
    activeName() {
      this.hz.name = "";
      this.hz.datelist = [];
      if(this.activeName=='first'){
          loading(this,'visit1',0.3)
      }else{
          loading(this,'visit2',0.3)
      }
    },
  },
};
</script>
<style scoped>
*{
  font-weight: bold;
}
.mt{
  margin-top:20px
}
#visitslist{
box-shadow:  0px 0px 25px #98d3e7;
}
</style>
